// pages/duchuntao/unit5/case5-3/case5-3.js
var ctx=wx.createCanvasContext('myCanvas')
Page({
    clear:function(){
        ctx.draw()
    },
    drawDot:function(e){
        ctx.arc(200,200,10,0,2*Math.PI)
        ctx.setFillStyle('black')
        ctx.fill()
        ctx.draw()
    },
    drawCircle:function(){
        ctx.setFillStyle('black')
        ctx.arc(200,200,10,0,2*Math.PI)
        ctx.fill ()
        ctx.setStrokeStyle('red')
        ctx.moveTo(300,200)
        ctx.arc(200,200,100,0,2*Math.PI)
        ctx.stroke()
        ctx.draw()
    },
    drawDash:function(){
        ctx.setStrokeStyle('red')
        ctx.setLineDash([20,10])
        ctx.setLineWidth(10)
        ctx.moveTo(50,100)
        ctx.lineTo(250,100)
        ctx.lineTo(150,300)
        ctx.lineTo(50,100)
        ctx.stroke()
        ctx.draw()
        ctx.setLineDash([0,0])
        ctx.setLineWidth(1)
            },
    drawText:function(){
        ctx.setFillStyle('red')
        ctx.setFontSize(40)
        ctx.setTextBaseline('bottom')
        ctx.fillText('北方工业大学',80,80)
        ctx.setFillStyle('yellow')
        ctx.setTextBaseline('top')
        ctx.fillText('北方工业大学',80,80)
        ctx.setFillStyle('black')
        ctx.rotate(30*Math.PI/180)
        ctx.fillText('北方工业大学',150,80)
        ctx.draw()
            },
    circularGrad:function(){
    var grd=ctx.createCircularGradient(175,175,125)
    grd.addColorStop(0,'purple')
    grd.addColorStop(1,'white')
    ctx.setFillStyle(grd)
    ctx.fillRect(50,50,250,250)
    ctx.draw()
    },
    shadowRect:function(){
    ctx.setFillStyle('orange')
    ctx.setShadow(20,20,50,'yellow')
    ctx.fillRect(50,50,250,250)
    ctx.draw()
    },
    translucent:function(){
    ctx.setFillStyle('red')
    ctx.setGlobalAlpha(0.2)
    ctx.fillRect(50,50,250,250)
    ctx.draw()
    ctx.setGlobalAlpha(1)
    },
    capAndJoin:function(){
    ctx.setStrokeStyle('red')
    ctx.setLineWidth(20)
    ctx.setLineCap('round')
    ctx.setLineJoin('miter')
    ctx.moveTo(50,50)
    ctx.lineTo(250,50)
    ctx.lineTo(50,250)
    ctx.lineTo(250,250)
    ctx.stroke()
    ctx.draw()
    ctx.setLineWidth(1)
    ctx.setLineCap('butt')
    ctx.setLineJoin('mitter')
    },
    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})